<script setup lang="ts">
	import { ref, markRaw } from "vue";
	import ReCol from "@/components/ReCol";
	import { useDark, randomGradient } from "./utils";
	import WelcomeTable from "./components/table/index.vue";
	import { ReNormalCountTo } from "@/components/ReCountTo";
	import { useRenderFlicker } from "@/components/ReFlicker";
	import { ChartBar, ChartLine, ChartRound } from "./components/charts";
	import Segmented, { type OptionsType } from "@/components/ReSegmented";
	import { chartData, barChartData, progressData, latestNewsData } from "./data";


	defineOptions({
		name: "Welcome"
	});

	const { isDark } = useDark();

	let curWeek = ref(1); // 0上周、1本周
	const optionsBasis : Array<OptionsType> = [
		{
			label: "日统计"
		},
		{
			label: "周统计"
		}
	];
</script>

<template>
	<div>
		<el-row :gutter="24" justify="space-around">
			<!-- <re-col
        v-for="(item, index) in chartData"
        :key="index"
        v-motion
        class="mb-[18px]"
        :value="6"
        :md="12"
        :sm="12"
        :xs="24"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * (index + 1)
          }
        }"
      >
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">
              {{ item.name }}
            </span>
            <div
              class="w-8 h-8 flex justify-center items-center rounded-md"
              :style="{
                backgroundColor: isDark ? 'transparent' : item.bgColor
              }"
            >
              <IconifyIconOffline
                :icon="item.icon"
                :color="item.color"
                width="18"
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div class="w-1/2">
              <ReNormalCountTo
                :duration="item.duration"
                :fontSize="'1.6em'"
                :startVal="100"
                :endVal="item.value"
              />
              <p class="font-medium text-green-500">{{ item.percent }}</p>
            </div>
            <ChartLine
              v-if="item.data.length > 1"
              class="!w-1/2"
              :color="item.color"
              :data="item.data"
            />
            <ChartRound v-else class="!w-1/2" />
          </div>
        </el-card>
      </re-col> -->

			<re-col v-motion class="mb-[18px]" :value="24" :xs="24" :initial="{
          opacity: 0,
          y: 100
        }" :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }">
				<el-card class="bar-card" shadow="never">
					<div class="flex justify-between">
						<span class="text-md font-medium">分析概览</span>
						<Segmented v-model="curWeek" :options="optionsBasis" />
					</div>
					<div class="flex justify-between items-start mt-3">
						<ChartBar :curWeek="curWeek" />
					</div>
				</el-card>
			</re-col>


			<re-col v-motion class="mb-[18px]" :value="24" :xs="24" :initial="{
          opacity: 0,
          y: 100
        }" :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 560
          }
        }">
				<el-card shadow="never" class="h-[580px]">
					<div class="flex justify-between">
						<span class="text-md font-medium">仓库统计</span>
					</div>
					<WelcomeTable class="mt-3" />
				</el-card>
			</re-col>
		</el-row>
	</div>
</template>

<style lang="scss" scoped>
	:deep(.el-card) {
		--el-card-border-color: none;

		/* 解决概率进度条宽度 */
		.el-progress--line {
			width: 85%;
		}

		/* 解决概率进度条字体大小 */
		.el-progress-bar__innerText {
			font-size: 15px;
		}

		/* 隐藏 el-scrollbar 滚动条 */
		.el-scrollbar__bar {
			display: none;
		}

		/* el-timeline 每一项上下、左右边距 */
		.el-timeline-item {
			margin: 0 6px;
		}
	}

	.main-content {
		margin: 20px 20px 0 !important;
	}
</style>